<template>
  <div class="page-container">
    <div class="content">
      <div class="content-item">
        <transition
          v-on:before-enter="beforeEnter"
          v-on:leave="leave"
          v-bind:css="false"
        >
          <div v-show="showAction">
            <stopStatusHeader :title="'停车位实时状态'"></stopStatusHeader>
            <div class="content-img">
              <div id="content-img"></div>
              <div class="content-img--right">
                <div class="right-total">
                  <div
                    class="right-item"
                    v-for="(item, index) in parkingList"
                    :key="index"
                  >
                    <div class="right-title">
                      <span>{{ item.name }}</span>
                      <img :src="item.img" alt="" />
                    </div>
                    <div class="right-item--value">{{ item.value }}</div>
                    <div class="right-item--percent">{{ item.percent }}</div>
                  </div>
                </div>

                <div class="right-info">
                  <div class="info-title">
                    <span>信息来源</span>
                    <img src="../assets/椭圆 10 拷贝.png" alt="" />
                  </div>

                  <div class="info-columnar">
                    <div
                      class="info-columnar-item"
                      v-for="(item, index) in sourceList"
                      :key="index"
                    >
                      <div
                        class="columnar"
                        :style="{ height: item.value * 0.75 + 'px' }"
                      ></div>
                      <span>{{ item.name }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </transition>
        <transition
          v-on:before-enter="beforeEnter"
          v-on:leave="leave"
          v-bind:css="false"
        >
          <div v-show="showAction">
            <stopStatusHeader
              :title="'停车辆曲线图'"
              style="margin: 20px 0"
            ></stopStatusHeader>
            <div class="content-curve">
              <div class="curve-text--left">
                <div>上次停车量</div>
                <div class="right-num">10333次</div>
                <div>下降9.2%</div>
              </div>
              <div class="curve-text--right">
                <div>上次停车量</div>
                <div class="right-orange">10333次</div>
                <div>下降3.1%</div>
              </div>
              <div id="content-curve" ></div>
            </div>
          </div>
        </transition>
        <transition
          v-on:before-enter="beforeEnter"
          v-on:leave="leave"
          v-bind:css="false"
        >
          <div v-show="showAction">
            <stopStatusHeader
              :title="'停车位余量分布'"
              style="margin: 20px 0"
            ></stopStatusHeader>
            <div class="content-surplus" id="content-surplus"></div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import stopStatusHeader from "./stopStatus/stopStatusHeader";
import { placeOption,lineOption,getbarOption } from "../tools/echarts";
export default {
  name: "stopStatus",
  components: {
    stopStatusHeader,
  },
  data() {
    return {
      parkingList: [
        {
          name: "空闲",
          value: "1253",
          percent: "38.2%",
          img: require("../assets/椭圆 10.png"),
        },
        {
          name: "空闲",
          value: "1706",
          percent: "53.3%",
          img: require("../assets/椭圆 10(1).png"),
        },
        {
          name: "空闲",
          value: "326",
          percent: "10.2%",
          img: require("../assets/椭圆 10(2).png"),
        },
      ],
      sourceList: [
        { name: "微信程序", value: 50 },
        { name: "电话服务", value: 30 },
        { name: "app", value: 20 },
      ],
      surPlusList: [
        { surplus: 33, parkTotal: 188, area: "A区" },
        { surplus: 121, parkTotal: 230, area: "B区" },
        { surplus: 12, parkTotal: 43, area: "C区" },
        { surplus: 25, parkTotal: 36, area: "D区" },
      ],
    };
  },
  mounted(){
    setTimeout(() => {
      placeOption({id:'content-img'})
      lineOption({id:'content-curve'})
      getbarOption({id:'content-surplus'})
    }, 1000);
  }
};
</script>

<style lang="scss" scoped>
@import '@/assets/scss/common.scss';
.content-img {
  margin-top: 55px;
  display: flex;
  justify-content: space-between;
  color: #6f767a;
  >div:first-child{
    height: cheight(157);
  }
}
.content-img>div{
  flex: 1;
}
.content-img--right {
  display: flex;
  flex-direction: column;
  padding-left: 24px;
}

.right-total {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 15px;
}

.right-title {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.right-item > div {
  display: flex;
  justify-content: flex-start;
}

.right-title > span {
  margin-right: 4px;
}

.right-title img {
  width: 17px;
  height: 17px;
}

.right-item--value {
  font-size: 18px;
}

.right-item--percent {
  font-size: 12px;
}

.right-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 20px;
}

.info-title > span {
  margin-right: 4px;
}

.info-columnar {
  display: flex;
  flex-direction: row;
}

.info-columnar-item {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  margin-left: 8px;
}

.columnar {
  width: 5px;
  background: #757b80;
  border-radius: 4px;
  font-size: 12px;
}

.info-columnar-item > span {
  margin-left: 4px;
}

.content-curve {
  width: 100%;
  height: cheight(180);
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  color: #4f525a;
  font-weight: 600;
  font-size: 12px;
  #content-curve{
    position:absolute;
    width: 100%;
    height: cheight(180);
  }
}

.curve-text--left {
  margin-top: 10px;
}

.curve-text--right {
  margin-top: 10px;
}

.right-num {
  font-size: 18px;
}

.right-orange {
  color: #85622c;
  font-size: 18px;
}

.content-surplus {
  display: flex;
  flex-direction: row;
  color: #343c42;
  height: cheight(202);
}

.surplus-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin-right: 36px;
}
.surplus-item span:nth-child(2) {
  margin-top: 10px;
}
.surplus-item span:nth-child(1) {
  margin-bottom: 10px;
}
.surplus-circle {
  border-radius: 8px;
  position: relative;
  width: 4px;
  background: #7d8389;
}
.circle-top {
  position: absolute;
  transform: translateY(-50%);
  left: 7px;
}
</style>